<template>
  <view class="container">
    <!-- 背景 -->
    <view class="background">
      <view class="bg-gradient"></view>
      <view class="bg-blur-1"></view>
      <view class="bg-blur-2"></view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- Logo -->
      <view class="logo">
        <view class="logo-box">
          <uni-icons type="home" size="60" color="#FFFFFF"></uni-icons>
        </view>
      </view>

      <!-- 标题 -->
      <view class="title">天顺路桥</view>
      <view class="subtitle">您的掌上移动管家</view>

      <!-- 登录按钮 -->
      <view class="login-btn" @click="handleLogin">
        <uni-icons type="right" size="20" color="#FFFFFF" style="margin-right: 10rpx;"></uni-icons>
        <text>登录</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    handleLogin() {
      // 跳转到账号登录页面
      uni.navigateTo({
        url: '/pages/login/account'
      })
    }
  }
}
</script>

<style>
.container {
  flex: 1;
  background-color: #F2F4FA;
}

.background {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
}

.bg-gradient {
  position: absolute;
  width: 750rpx;
  height: 1624rpx;
  background: linear-gradient(180deg, #F2F4FA -3%, #F9FCFB 100%);
}

.bg-blur-1 {
  position: absolute;
  width: 642rpx;
  height: 642rpx;
  left: -236rpx;
  top: -150rpx;
  background: rgba(156, 210, 255, 0.18);
  filter: blur(217.46rpx);
  border-radius: 50%;
}

.bg-blur-2 {
  position: absolute;
  width: 554rpx;
  height: 554rpx;
  left: 376rpx;
  top: -140rpx;
  background: linear-gradient(134deg, rgba(193, 165, 250, 0.18) 15%, rgba(156, 210, 255, 0.09) 37%, rgba(156, 210, 255, 0.18) 77%);
  filter: blur(81.54rpx);
  border-radius: 50%;
}

.content {
  position: relative;
  flex: 1;
  align-items: center;
}

.logo {
  margin-top: 340rpx;
  margin-bottom: 60rpx;
}

.logo-box {
  width: 144rpx;
  height: 144rpx;
  background-color: #4980FF;
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 72rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 400;
  color: #353535;
  margin-bottom: 120rpx;
}

.login-btn {
  width: 622rpx;
  height: 90rpx;
  background-color: #4980FF;
  border-radius: 94rpx;
  box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(45, 47, 51, 0.1);
  justify-content: center;
  align-items: center;
  display: flex;
}

.login-btn text {
  font-size: 34rpx;
  font-family: "Alibaba PuHuiTi 2.0";
  font-weight: 500;
  color: #FFFFFF;
}
</style> 